<template>
	<view class="mysettle-container">
		<!-- 全选区域,点击label区域都可以触发函数 -->
		<label @click="updataAllChecked">
			<!-- 如何判断全选框是否应该是选中状态，当商品总的数量等于选中的商品数量（结算当中的总数，那么就应该是全选状态） -->
			<radio color="#c00000" :checked="ischecked" style="transform:scale(0.7)" /><text>全选</text>
			<!-- 商品全选和反选的状态如何判断，但我们点击全选时，因为全选的值是根据商品总数和商品选中的数量相比较而确定的，状态是确定的
			 所以，每次当我们点击之后，取反，就是全选按钮的最新状态，然后将这个状态传递给vuex，让购物车页面的数据进行更新-->
		</label>
		<!-- 商品合计 -->
		<view class="goods_sum">
			<!-- 计算已勾选商品的商品价格总数，实现思路，在vuex当中，定义一个数据处理器，筛选出已勾选的商品数量*商品价格，然后相加 -->
			合计：<text class="goods_sum_text">￥{{countStateTruePrice}}</text>
		</view>
		<!-- 结算按钮 -->
		<!-- 结算模块的统计，我们的思路是，这个数据是统计用户是否勾选了 当前商品，如果统计了则计数，否则不计数，抽离到vuex当中 -->
		<view class="jiesuan">
			结算({{checkedCount}})
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				// // 全选框是否选中
				// ischecked:false;
			};
		},
		computed:{
			...mapGetters('m_cart',['checkedCount','total','countStateTruePrice']),
				// 定义一个计算属性，判断是否选中
			ischecked(){
				return this.checkedCount == this.total
			}
		},
		methods:{
			...mapMutations('m_cart',['updateGoodsAllState']),
			updataAllChecked(){	
				// 将最新的值传递给vuex，更新所有商品状态
				this.updateGoodsAllState(!this.ischecked);
			}
		}
	}
</script>

<style lang="scss">
	.mysettle-container {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 50px;
		width: 100%;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:14px;
		padding-left: 10px;
		z-index: 999;
	}
	.goods_sum_text {
	
			font-weight: bold;
			color:#c00000;
		
	}
	.jiesuan {
		background-color: #c00000;
		height: 50px;
		min-width: 100px;
		text-align: center;
		color:white;
		line-height: 50px;
	}


</style>
